<template>
  <view class="animated fadeIn faster position-relative " style="height: 100vh;">
    <view class="pt-3 pb-1  mb-2">
      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-between d-flex-middle">
          <view class="pt-2 font26 " style="width: 150rpx;">
            <text>头像：</text>
          </view>
          <view class="pl-1">
            <view class="position-relative rounded" style="height: 100rpx;width: 100rpx;" @click="uploadImg">
              <view class="position-absolute top-0 left-0 z-index-100 rounded d-flex d-flex-middle d-flex-center"
                    style="width: 100rpx;height: 100rpx;background-color: rgba(0,0,0,.5);">
                <text class="iconfont icon-xiangji colorfff" style="font-size: 56rpx;"></text>
              </view>
              <image :src="formData.avatar" class="rounded" style="width: 100rpx;height: 100rpx;"></image>
            </view>
            <!-- <uni-file-picker limit="1" :del-icon="false" v-model="imgList" :imageStyles="imageStyles" :auto-upload="false" @select="handleSelect" :source-type="['album', 'camera']"></uni-file-picker> -->
          </view>
        </view>
      </view>

      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">昵称：</text>
          </view>
          <input class="d-flex-item py-1-5 px-1 text-right" maxlength="10" v-model="formData.name"
                 placeholder="请输入昵称"
                 placeholder-class="color-92 font26"/>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>


      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">昵称：</text>
          </view>
          <input class="d-flex-item py-1-5 px-1 text-right" maxlength="10" v-model="formData.name"
                 placeholder="请输入昵称"
                 placeholder-class="color-92 font26"/>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>


      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">真实姓名：</text>
          </view>
          <input class="d-flex-item py-1-5 px-1 text-right" maxlength="10" v-model="formData.name"
                 placeholder="请填写真实姓名"
                 placeholder-class="color-92 font26"/>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>


      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">手机：</text>
          </view>
          <input class="d-flex-item py-1-5 px-1 text-right" maxlength="10" v-model="formData.name"
                 placeholder="请输入手机"
                 placeholder-class="color-92 font26"/>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>

      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between py-1-5 px-1">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">微信：</text>
          </view>
          <view class="color-92">
            <text>已绑定</text>
            <text class="iconfont icon-youjiantou color-92"></text>
          </view>
        </view>
      </view>


      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between py-1-5 px-1">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">修改密码：</text>
          </view>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>

      <view class="p-item px-2 m-2 bg-fff rounded10">
        <view class="d-flex d-flex-middle d-flex-between py-1-5 px-1">
          <view class="font26 " style="width: 150rpx;">
            <text class="color666">收货地址：</text>
          </view>
          <text class="iconfont icon-youjiantou color-92"></text>
        </view>
      </view>


    </view>
    <view class="position-fixed fab-bottom left-0 right-0 z-index-100 pb-5">
      <view class="d-flex d-flex-between p-2">
        <view class="main-color bg-fff p-2 d-flex d-flex-item d-flex-middle d-flex-center rounded40 "
              @click="logout">切换账号
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {userApi} from '@/http/userApi.js';
import {fileApi} from '@/http/fileApi.js';
import store from '@/store/index.js';
import {USER_TOKEN} from '@/constants/local-storage-key-const';
import {
  mapState
} from "vuex"

export default {
  data() {
    return {
      imgList: [],
      imageStyles: {
        width: 100,
        height: 100,
        border: {
          radius: '50%', borderWith: 0
        }
      },
      formData: {
        avatar: '',
        name: '',
        gender: 1
      }
    }
  },
  onLoad() {
    let that = this
    if (this.openid == null || this.openid == '') {
      uni.login({
        success: res => {
          that.sendCode(res.code)
        },
        fail: res => {
          console.log(res)
        }
      });
    }
  },
  onReady() {
    this.formData.avatar = this.avatar
    this.imgList = [{
      "name": "111.jpg",
      "extname": "jpg",
      "url": this.formData.avatar
    }]
    this.formData.name = this.name
    console.log(this.imgList)
  },
  onUnload(options) {
    // 返回上一页
    let page = getCurrentPages();
    let prevpage = page[page.length - 2]; //上一个页面对象
    let token = uni.getStorageSync(USER_TOKEN);
    if (prevpage.route == "pages/login/login" && token) {
      uni.switchTab({url: '/pages/mine/mine'})
    }
  },
  computed: {
    ...mapState({
      id: state => state.id,
      openid: state => state.openid,
      wx: state => state.wx,
      real_name: state => state.real_name,
      avatar: state => state.avatar,
      phone: state => state.phone,
      name: state => state.nickName,
      gender: state => state.gender,
      created_at: state => state.created_at
    })
  },
  methods: {
    uploadImg() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.uploadFile(res.tempFilePaths[0]);
        }
      });
    },
    handleSelect(e) {
      const fileList = e.tempFiles;
      if (fileList.length > 0) {
        const filePath = fileList[0].path;
        this.uploadFile(filePath);
      }
    },
    uploadFile(filePath) {
      let that = this
      uni.showLoading({
        title: '上传中...'
      })
      fileApi.upload(filePath, {'user_id': that.id}).then((res) => {
        uni.hideLoading()
        if (res && res.data) {
          // that.imgList.push({'url':res.data,'name':''})
          that.formData.avatar = res.data
        }
      }).catch(() => {
        uni.hideLoading()
      })
    },
    async sendCode(cd) {
      const userData = await userApi.addUserInfo({
        'code': cd,
      })
      store.commit('setUserInfo', userData)
    },
    async addInfo() {
      let that = this
      if (!that.formData.name) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      if (that.formData.gender !== 1 && that.formData.gender !== 2) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }
      if (that.imgList.length == '') {
        uni.showToast({
          title: '请上传头像',
          icon: 'none'
        })
        return
      }
      that.formData.user_id = that.id
      try {
        uni.showLoading({
          title: '提交中...'
        })
        let userData = await userApi.addUserInfo(that.formData)
        store.commit('setUserInfo', userData)
        uni.showToast({
          title: '提交成功！',
          duration: 1500,
          complete() {
            setTimeout(() => {
              uni.navigateBack({
                delta: 2
              })
            }, 1500)
          }
        })
      } catch (e) {
        console.log('e', e)
        uni.hideLoading()
      }
    },
    logout() {
      uni.showToast({
        title: '退出登录！',
        icon: 'success'
      })
      setTimeout(() => {
        store.commit("logOut")
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    },
  }
}
</script>

<style scoped>
.py-1-5 {
  padding-top: 15rpx;
  padding-bottom: 15rpx;
  line-height: 38rpx;
}

.p-item {
  border-bottom: solid 1px #eee;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
}

.p-item-nobtm {
  border-bottom-width: 0;
}

.camera-bg {
  background-color: #f6f7fb;
  width: 60rpx;
  height: 60rpx;
  border-radius: 60rpx;
}

.publish-sure-bg {
  background-color: #0df297;
  height: 80rpx;
}

.bg-page {
  background: #f7f6fb;
}

.fab-bottom {
  bottom: calc(var(--window-bottom));
}

.publish-save-bg {
  background-color: #38aa84;
  height: 80rpx;
}

.gender-btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  transition: all 0.3s;
}

.gender-btn-active {
  background-color: #0df297;
  border-color: #0df297;
}
</style>